<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>忘记密码</title>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="js/layui-v2.4.5/css/layui.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/public.css">
    <style>
        .content {
            padding: 0.2rem 0.2rem 0.6rem 0.2rem;
            position: absolute;
            top: 2.74rem;
            margin: 0 0.4rem;
            width: 6.3rem;
            /*height: 7rem;*/
            background: #fff;
            border-radius: 0.1rem;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .login_btn {
            width: 6rem;
            height: 0.8rem;
            font-size: 0.32rem;
            line-height: 0.8rem;
            text-align: center;
            color: #fff;
            background: #1eaafd;
            border-radius: 0.1rem;
        }

        .zc_btn {
            width: 6rem;
            height: 0.8rem;
            font-size: 0.32rem;
            line-height: 0.8rem;
            text-align: center;
            color: #333;
            background: #fff;
            border-radius: 0.1rem;
        }

        .content_title {
            font-size: 0.36rem;
            color: #333;
            font-weight: bold;
            line-height: 1.3rem;
            text-indent: 0.2rem;
        }

        input[type=text], input[type=password] {
            margin-left: 0;
            background: #fff;
            height: 1rem;
            line-height: 1rem;
            /*text-align: right;*/
            width: 4.9rem;
            color: #999;
            border: unset;
            text-indent: 0.2rem;
        }

        .input_box {
            width: 6rem;
            height: 1rem;
            line-height: 1rem;
            margin: auto;
            border-bottom: 1px solid #f6f6f6;
        }

        .input_box > img {
            width: 0.4rem;
            height: 0.4rem;
        }
    </style>
</head>
<body>
<div class="app">
    <img src="image/personal_login_pg.png" style="width: 7.5rem;height: 4.4rem;">
    <!--内容-->
    <div class="content">
        <div class="content_title">忘记密码</div>

        <div>
            <div class="input_box">
                <img src="image/personal_login_people.png">
                <input name="name" type="text" placeholder="用户名">
            </div>

            <div class="input_box">
                <img src="image/personal_login_phone.png">
                <input name="phone" type="text" placeholder="您的手机号">
            </div>

            <div class="input_box">
                <img src="image/personal_login_idka.png">
                <input name="identity_id" type="text" placeholder="您的身份证号码">
            </div>

            <div class="input_box">
                <img src="image/personal_login_mima.png">
                <input name="pwd" type="password" placeholder="重置您的密码">
            </div>

            <div class="input_box">
                <img src="image/personal_login_mima.png">
                <input name="pwd_again" type="password" placeholder="请确认您重置的密码">
            </div>
        </div>


        <div style="position:absolute;bottom: 0;margin: 0 0.15rem -0.4rem 0.15rem;">
            <div class="login_btn">确认重置</div>
        </div>
    </div>

</div>

<!-- JS -->
<script src="js/jquery-3.4.0/jquery-3.4.0.min.js"></script>
<script src="js/layui-v2.4.5/layui.all.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
    $(".login_btn").on("click", function () {
        let name = $("input[name=name]").val();
        let phone = $("input[name=phone]").val();
        let identity_id = $("input[name=identity_id]").val();
        let pwd = $("input[name=pwd]").val();
        let pwd_again = $("input[name=pwd_again]").val();

        alert("\nname:" + name + "\nphone:" + phone + "\nidentity_id:" + identity_id + "\npwd:" + pwd + "\npwd_again:" + pwd_again)
    })
</script>
</body>

</html>
